<script setup lang="ts">
interface Props {
  currentPage: number
  totalPages: number
  totalItems: number
  searchQuery?: string
}

interface Emits {
  (e: 'page-change', page: number): void
}

const props = defineProps<Props>()
const emit = defineEmits<Emits>()

const handlePageChange = (page: number) => {
  if (page >= 1 && page <= props.totalPages) {
    emit('page-change', page)
  }
}
</script>

<template>
  <div class="pagination" v-if="totalPages > 1">
    <button
      @click="() => handlePageChange(currentPage - 1)"
      :disabled="currentPage === 1"
      class="pagination-btn"
    >
      上一页
    </button>

    <span class="pagination-info">
      第 {{ currentPage }} 页，共 {{ totalPages }} 页
      <span v-if="searchQuery"> （搜索 "{{ searchQuery }}" 找到 {{ totalItems }} 个结果） </span>
    </span>

    <button
      @click="() => handlePageChange(currentPage + 1)"
      :disabled="currentPage === totalPages"
      class="pagination-btn"
    >
      下一页
    </button>
  </div>
</template>

<style scoped lang="scss">
@use '@/style/variables.scss' as vars;
@use '@/style/mixins.scss' as mixins;

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: vars.$spacing-xl;
  gap: vars.$spacing-md;
  flex-wrap: wrap;
}

.pagination-btn {
  @include mixins.glass-button;
}

.pagination-info {
  color: vars.$text-secondary;
  font-weight: 500;
  text-align: center;
}
</style>
